import type { CSSProperties } from 'vue';
import type { Color, Numberic, PtComponent, PtComponentConst } from "../../../types";
import type { PtContainer } from '../../../types';

export const name = 'block';

type ComponentType = typeof name;

export interface Props {
    children: PtComponentConst[];
}

export interface RenderOptions {
    // 边框颜色
    borderColor: Color;
    // 边框宽度
    borderWidth: Numberic;
    // 边框圆角，-1为正圆（相当于100%圆角）
    borderRadius: Numberic;
    // 背景
    background: Color;
}

export interface ThisComponent extends PtComponent<ComponentType, Props, RenderOptions> {}

export const render = (instance: PtContainer, comp: ThisComponent | PtComponentConst): JSX.Element => {
    const thisComponent = comp;

    const { value, render } = thisComponent;
    
    const style: CSSProperties = {
        background: render?.background || '',
        borderRadius: instance.style.getRadiusSize(render.borderRadius)
    };

    return (<div style={style}>{value.children.map((child: PtComponentConst) => {
        return instance.getComponent(child, comp);
    })}</div>)
}